<template>
  <div class="img-input">

    <!--Sinputhe和上传按钮-->
    <div id="input-btn">
        <Input v-model="value" readonly disabled />
        <Button class="btn" type="primary" @click="clickUploadImg">选择图片</Button>
    </div>
    <div id="images">
      <div class="images">
        <img v-if="src != ''" :src="src" />
        <img v-else src="./images/nopic.jpg" />
        <Icon @click="deleteImageValue" class="delete-image-value" size="20" color="#ccc" type="md-close" />
      </div>
    </div>
    <!--Sinputhe和上传按钮-->

    <!--上传图片组件--><input style="display:none;" ref="uploadFile" @change="uploadFileChange" type="file" class="upload-file" accept="image/gif,image/jpeg,image/png" />

    <!--S选择图片区域-->
    <Modal id="select-modal" v-model="select_model" title="选择图片" :width="900" :mask-closable="false" @on-ok="confirm" @on-cancel="cancel">
      <!--S头部-->
      <div class="header" slot="header">
        <h2>选择图片</h2>
        <div class="control">
          <Button class="btn" type="primary">上传图片</Button>
          <input ref="upload-file" @change="uploadFileChange" type="file" class="upload-file" multiple accept="image/gif,image/jpeg,image/png" />
        </div>
      </div>
      <!--E头部-->

      <!--S内容-->
      <div class="list">
<!--        <div class="li" :style="{'background-image':'url(https://www.baidu.com/img/bd_logo1.png)'}" @mouseenter="liEnter" @mouseleave="liLeave" @click="liClick">-->
<!--          <p class="name" @click="nameClick">图片名字图片名字图片名字图片名字</p>-->
<!--          <Icon @click="deleteImage" class="delete-image" type="ios-trash" size="22" color="#fff"/>-->
<!--          <div class="selected" @click="clickSelected"></div>-->
<!--        </div>-->

        <div v-for="(item,index) in list.list" class="li" :style="{'background-image':'url('+item.src+')'}" @mouseenter="liEnter" @mouseleave="liLeave" :data-attachment="item.attachment" @click="liClick">
          <p class="name" @click="nameClick">{{item.filename}}</p>
          <Icon @click.stop="deleteImage(item.id)" class="delete-image" type="ios-trash" size="22" color="#fff"/>
          <div class="selected" :data-attachment="item.attachment" @click.stop="clickSelected"></div>
        </div>

        <div id="page" v-if="list.total > list.page_size"><Page class="page" :total="list.total" :current="list.page+1" :page-size="list.page_size" @on-change="pageChange"></Page></div>
      </div>
      <!--E内容-->
    </Modal>
    <!--E选择图片区域-->

  </div>
</template>

<script>
  export default {
    name: 'ImgInput',
    data(){
      return {
        //数据
        src:'',   //选择图片的地址
        //选择图片区域
        select_model:false,  //显示状态
        //图片列表
        list:{
          list:[],   //列表
          total:0,  //总数
          page:0,   //当前页码
          page_size:10   //一页显示数量
        },
        //选择的图片列表
        select:[]
      }
    },
    model:{
      prop:'value',
      event: 'change'
    },
    props:{
      value:{
        type:String,
        default:''
      }
    },
    watch:{
      value(){
        if(this.value != ''){
          this.getSrc();
        }else{
          this.src = '';
        }
      }
    },
    created(){
      if(this.value != '') this.getSrc();
    },
    methods:{
      //获取图片的地址
      getSrc(){
        Axios.post(sysinfo.url,Qs.stringify({
          pages:'file',
          doing:'getSrc',
          path:this.value
        }))
                .then((res)=>{
                  if(res.data.status == 'success'){
                    this.src = res.data.data;
                  }else{
                    console.error('获取src地址失败');
                  }
                })
                .catch(error=>console.log(error));
      },
      //删除当前图片value
      deleteImageValue(){
        this.$emit('remove');
      },
      //鼠标移入图片列表li
      liEnter(event){
        $(event.target).css('border-color','#2D8CF0');
        $(event.target).find('.delete-image').css('display','block');
      },
      //鼠标移出图片列表li
      liLeave(event){
        $(event.target).css('border-color','#fff');
        $(event.target).find('.delete-image').css('display','none');
      },
      //点击li列表
      liClick(event){
        $(event.target).find('.selected').css('display','block');
        this.select.push($(event.target).attr('data-attachment'));
      },
      //点击列表li的图片名字
      nameClick(event){
        $(event.target).parent().find('.selected').css('display','block');
      },
      //点击选中的遮罩层
      clickSelected(event){
        $(event.target).css('display','none');
        for(let i=0;i<this.select.length;i++){
          if(this.select[i] == $(event.target).attr('data-attachment')){
              this.select.splice(i,1);
              break;
          }
        }
      },
      //删除图片
      deleteImage(attachment_id){
        this.$Modal.confirm({
          title: '提示',
          content: '确定要删除此图片吗?',
          onOk:()=>{
            Axios.post(sysinfo.url,Qs.stringify({
              pages:'file',
              doing:'deleteImg',
              attachment_id
            }))
                    .then((res)=>{
                      if(res.data.status == 'success'){
                        this.getTotal();
                        this.getList();
                      }else{
                        this.$Message.error('删除失败');
                      }
                    })
                    .catch(error=>console.log(error));
          }
        });
      },
      //点击了确认按钮
      confirm(){
        this.$emit('change',this.select[this.select.length-1]);
      },
      //点击了取消按钮
      cancel(){

      },
      //input=file组件change
      uploadFileChange(event){
        var files = event.target.files;
        for(var i=0;i<files.length;i++){
          this.uploadFile(files[i]);
        }
      },
      //上传图片
      uploadFile(file){
        var self = this;
        var xhr = new XMLHttpRequest();
        xhr.onload = function(){
        var res = JSON.parse(this.responseText.trim());
          if(res.status == 'success'){
            self.getTotal();
            self.getList();
          }else{
            this.$Message.error('上传失败');
          }
        }
        xhr.open('post',sysinfo.url,true);
        xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');
        var oForm = new FormData();
        oForm.append('pages','file');
        oForm.append('doing','uploadImg');
        oForm.append('file',file);
        xhr.send(oForm);
      },
      //点击上传图片按钮
      clickUploadImg(){
        this.select_model = true;
        $('#select-modal .selected').css('display','none');
        this.select = [this.value];
        this.getTotal();
        this.getList();
      },
      //获取列表总数
      getTotal(){
        Axios.post(sysinfo.url,Qs.stringify({
          pages:'file',
          doing:'getImgTotal',
        }))
                .then((res)=>{
                  if(res.data.status == 'success'){
                    this.list.total = res.data.data;
                  }
                })
                .catch(error=>console.log(error));
      },
      //获取列表
      getList(){
        Axios.post(sysinfo.url,Qs.stringify({
          pages:'file',
          doing:'getImgList',
          limit:[this.list.page*this.list.page_size,this.list.page_size]
        }))
                .then((res)=>{
                  if(res.data.status == 'success'){
                    this.list.list = res.data.data;
                    this.listSelect();
                  }else{
                    this.list.list = [];
                  }
                })
                .catch(error=>console.log(error));
      },
      //点击分页
      pageChange(page){
        this.list.page = page-1;
        $('#select-modal .selected').css('display','none');
        this.getList();
      },
      //列表已选中的图片
      listSelect(){
        for(let i=0;i<this.select.length;i++){
          for(let j=0;j<this.list.list.length;j++){
            if(this.select[i] == this.list.list[j].attachment){
              $('#select-modal .selected').eq(j).css('display','block');
            }
          }
        }
      }
    }
  }
</script>

<style scoped>
  .loading-spin{
    position:fixed;
    top:60px;
  }
  #input-btn{
    position: relative;
    width:100%;
  }
  #input-btn .btn{
    position:absolute;
    top:33px;
    right:0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  #images{
    width:100%;
    margin-top: 10px;
  }
  #images .images{
    position: relative;
    width:150px;
    min-height:1px;
    max-height:1000px;
    border:1px solid #ccc;
    padding:5px;
    box-sizing: border-box;
    border-radius: 5px;
  }
  #images .images img{
    width:100%;
    display: block;
  }
  #images .images .delete-image-value{
    position: absolute;
    top:0;
    right:-20px;
    cursor: pointer;
  }
  #select-modal h2{
    font-size:14px;
  }
  #select-modal .header{
    overflow: hidden;
  }
  #select-modal .control{
    position: relative;
    margin-top: 10px;
  }
  #select-modal .control .btn:nth-of-type(1){
    margin-right: 10px;
  }
  #select-modal .control .upload-file{
    position: absolute;
    left:0;
    width:80px;
    height:40px;
    background: red;
    opacity: 0;
    filter:alpha(opacity=0);
  }
  #select-modal .list .li{
    position:relative;
    display: inline-block;
    width:160px;
    height:160px;
    margin:0 17px 10px 0;
    border:2px solid #fff;
    background: #EEEEEE center center no-repeat;
    background-size:contain;
    cursor: pointer;
  }
  #select-modal .list .li:nth-of-type(5n){
    margin-right: 0;
  }
  #select-modal .li p.name{
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height:30px;
    line-height: 30px;
    padding:0 5px;
    color:#fff;
    background: rgba(0,0,0,0.5);
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
  }
  #select-modal .li .delete-image{
    position: absolute;
    z-index:20;
    top:0;
    right:0;
    background: #2D8CF0;
    display:none;
  }
  #select-modal .li .selected{
    position: absolute;
    z-index:10;
    width:100%;
    height:100%;
    text-align: center;
    line-height: 160px;
    background: rgba(0,0,0,0.6);
    display: none;
  }
  #select-modal .li .selected::after{
    content:'';
    background: url('./images/selected-icon.png') center center no-repeat;
    display: block;
    width: 100%;
    height:100%;
    background-size:30% 30%;
  }
  #page{
    height:20px;
  }
  #page .page{
    float: right;
  }
</style>
